var GameList = {
    template: `<div class="gamemy-list-wrapper">
        <a class="game" href="javascript:;" v-for="item in list">
            <div class="official-game-icon" v-if='item.GAME_TYPE == "NETDS" || item.GAME_TYPE == ""'>排名赛</div>
            <div class="team-game-icon" v-else-if='item.GAME_TYPE == "TDS"'>团队赛</div>
            <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "CLS"'>超级赛</div>
            <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "JYS"'>精英赛</div>
            <div class="huge-game-icon" v-else-if='item.GAME_TYPE == "QGS"'>全国赛</div>
            <div class="official-game-icon" v-else-if='item.GAME_KIND == "1"'>官方</div>
            <div class="text-center">
                <img src="./images/nrng/shuyezuo@3x.png">
                <div class="games-block-content">
                    <div class="game-name">{{item.UP_GAME_NAME || item.GAME_NAME}}</div>
                    <div class="date">
                        <span>{{item.FORMAT_BEGIN_DATE}} - {{item.FORMAT_END_DATE}}</span>
                        <b>
                            <i class="arrow-right1"></i><i class="arrow-right2"></i>
                        </b>
                    </div>
                </div>
                <img src="./images/nrng/shuyeyou@3x.png">
            </div>

            <div class="game-row">

                <div class="game-row-item">
                    <div class="key">参加人数</div>
                    <div class="value color-blue">
                        {{item.GAME_ATTEND_PERSON}}<span class="color-gray"
                                                         v-if="item.JOIN_BEGIN_DATE && item.JOIN_BEGIN_DATE!=0">/{{item.GAME_MAX_LIMIT}}</span>
                    </div>
                </div>

                <div class="game-row-item">
                    <div v-if="item.GAME_STEP < 3 && dateNow < item.BEGIN_DATE" class="time_closing"
                         v-text="item.timeClosing"></div>
                    <template v-else-if="item.GAME_STEP == 3 || item.GAME_STEP == 4">
                        <div class="key">我的排名</div>
                        <div v-text="item.ranknum <= 0?'--':item.ranknum" class="value rank"></div>
                    </template>
                </div>

                <div class="game-row-item" v-if="item.GAME_TYPE == 'TDS' && item.GAME_STEP > 2">
                    <div class="key">我的团队</div>
                    <div class="value">{{item.GAME_NAME}}</div>
                </div>

                <div class="game-row-item statue">
                    <div v-if="item.DELETE == 1 || item.GAME_STEP == 5 " class="color-gray">比赛失效</div>
                    <div v-else-if="item.GAME_STATUS == 0" class="blue">待审核</div>
                    <div v-else-if="item.GAME_STATUS == 2" class="blue">审核中</div>
                    <div v-else-if="item.GAME_STEP == 0" class="blue">未开放报名</div>
                    <div v-else-if="item.GAME_STEP == 1" class="blue">报名中</div>
                    <div v-else-if="item.GAME_STEP == 2" class="blue">报名结束</div>
                    <div v-else-if="item.GAME_STEP == 3" class="red">进行中</div>
                    <div v-else-if="item.GAME_STEP == 4" class="color-gray">已结束</div>
                </div>

            </div>

            <div class='forward'>
                <i class='iconfont icon-xiangyou'></i>
            </div>
        </a>
    </div>`,
    data: function(){
        return {
            dateNow: '',
            timeNow: '',
            baseDateTime: '',
            index: 0,
            timeschel: ''
        }
    },
    props: {
        list: {
            type: Array
        }
    },
    mounted: function () {
        if (this.list.length >0) {
            this.timeNow = Number(getTodayFormatTime());
            this.dateNow = Number(getTodayFormatDate());
            this._countdownTime();
        }
    },
    beforeDestroy: function () {
        clearInterval(this.timeschel);
    },
    methods: {
        _countdownTime(){
            var self = this;
            var time1 = (formatDate(self.dateNow) + " " + formatTime(self.timeNow)).toString();
            self.baseDateTime = new Date(time1.replace(/-/g, "/")); // 1991/11/11 11：11:12 兼容各浏览器的new Date()
            self.timeschel = setInterval(function () {
                if (typeof self.index === "undefined") {
                    self.index = 0;
                }
                    for (var i = 0;i<self.list.length;i++) {
                    if (self.list[i].GAME_STEP < 3) {
                        var beginDate = self.list[i].BEGIN_DATE;
                        var time2 = (formatDate(beginDate) + " 00:00:00").toString();
                        var endTime = new Date(time2.replace(/-/g, "/")); // 比赛开始时间
                        var nowTime = self.baseDateTime;
                        var t = endTime.getTime() - nowTime.getTime() - 1000 * self.index;
                        var d = 0, h = 0, m = 0, s = 0;
                        if (t >= 0) {
                            d = Math.floor(t / 1000 / 60 / 60 / 24);
                            h = Math.floor(t / 1000 / 60 / 60 % 24);
                            m = Math.floor(t / 1000 / 60 % 60);
                            s = Math.floor(t / 1000 % 60);
                        }
                        if (h < 10) {
                            h = "0" + h;
                        }
                        if (m < 10) {
                            m = "0" + m;
                        }
                        if (s < 10) {
                            s = "0" + s;
                        }
                        self.list[i].timeClosing = d + "天" + h + ":" + m + ":" + s;
                    }
                }
                self.index++;
            }, 1000);
        }
    }
}

new Vue({
    el: '#main',
    data: {
        tab: 'play',
        game_play_data: {gameList: []},
        game_build_data: {gameList: []},
        dateNow: '',
        playStyle: {},
        buildStyle: {}
    },
    components: {
        'game-list': GameList,
        'download': Download
    },
    mounted () {
        this.fetchData()
        this.setPlayCss()
        this.setBuildCss()
    },
    methods: {
        fetchData () {
            var self = this;
            var kv = {"usercode": getUrlParam("userCode"),"k2":""};
            window.TDAPP.onEvent("11008","",kv);
            window.TDAPP.send();

            $.ajax({
                url : getUrlParam("url"),
                type : "get",
                dataType:"jsonp",
                contentType:'charset=UTF-8',
                success : function(data) {
                },
                error:function(e){
                }
            });
            function niurenshare(data){
                console.log("我的比赛分享初始参数：",data);
                self.tab = data.tab;
                self.game_play_data = data.game_play_data;
                self.game_build_data = data.game_build_data;
                self.dateNow = Number(getTodayFormatDate());
                //微信分享
                window.weixinShare("沉迷比赛无法自拔","来啊，互相伤害","https://dl.app.gtja.com/nrng/shareimages/bisai1.png",window.location.href);
            }
            window.niurenshare = niurenshare;
        },
        _clickTab1(){
            this.tab = 'play';
        },
        _clickTab2(){
            this.tab = 'build';
        },
        setPlayCss(){
            var h=document.body.offsetHeight-155;
            var hNiu = h*0.4;
            var hBtn = h*0.08;
            var hInfo = 75;
            var hMarTop = (h-(hNiu+23*2+hInfo+hBtn))/2;//23*2是牛图的上下padding
            this.playStyle = {h: h, hNiu: hNiu, hBtn: hBtn, hMarTop: hMarTop}
        },
        setBuildCss(){
            var h=document.body.offsetHeight-155;
            var hNiu = h*0.4;
            var hBtn = h*0.08;
            var hInfo = 125;
            var hMarTop = (h-(hNiu+23*2+hInfo+hBtn))/2;//23*2是牛图的上下padding
            this.buildStyle = {h: h, hNiu: hNiu, hBtn: hBtn, hMarTop: hMarTop}
        }
    }
})




